<template>
  <div>
    <p style="font-size: 30px">奇遇查询</p>

    <el-col>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-cascader placeholder="选择区服" style="width: 100%" :options="server_name" v-model="value"
                       @change="valueChange"></el-cascader>
        </el-col>
        <el-col :span="6">
          <el-input placeholder="角色名" v-model="username"></el-input>
        </el-col>
        <el-col :span="6">
          <el-button @click="search">查询</el-button>
        </el-col>
      </el-row>


      <el-col style="margin-top: 15px">
        <el-table :data="meetData" border>
          <el-table-column prop="server" label="区服"></el-table-column>
          <el-table-column prop="name" label="角色名"></el-table-column>
          <el-table-column prop="serendipity" label="奇遇"></el-table-column>
          <el-table-column label="触发时间">
            <template #default="scope">
              <span>{{ getDate(scope.row.time) }}</span>
            </template>
          </el-table-column>

          <el-table-column label="奇遇分析">
            <template #default>
              <el-button link type="primary">触发时段</el-button>
              <el-button link type="primary">触发间隔</el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-col>
    </el-col>
  </div>
</template>

<script>
import {defineComponent} from "vue";
import {SERVER_NAME2} from "@/constant/constant";
import {j3api} from "@/axios/j3http";

export default defineComponent({
  name: "MeetSearchPage",
  data() {
    return {
      server_name: SERVER_NAME2,
      value: ['',''],
      username: '',
      meetData: []
    }
  },
  methods: {
    valueChange(val) {
      console.log(val);
    },
    search() {
      j3api.searchMeet(this.value[0], this.value[1], this.username).then(res => {
        console.log(res);
        this.meetData = res.result
      })
    },
    getDate(timestamp) {
      // 此处时间戳以毫秒为单位
      let date = new Date(parseInt(timestamp) * 1000);
      let Year = date.getFullYear();
      let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
      let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
      let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
      let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
      let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());

      return Year + '-' + Moth + '-' + Day + '   ' + Hour + ':' + Minute + ':' + Sechond;
    }
  },
  mounted() {
    this.value = [localStorage.getItem('server_bind'), localStorage.getItem('server_select')]
    this.search()
  }
})
</script>

<style scoped>

</style>
